<template>
  <div class="app-container calendar-list-container">

    <div style="color:gray; font-size:16px;margin-bottom:10px">平台对支付宝的单边账处理</div>

    <el-form :rules="rules"
             :model="temp"
             label-position="left"
             label-width="120px">

      <el-form-item label="机构ID" prop="orgId">
        <el-input v-model="temp.orgId"></el-input>
      </el-form-item>

      <el-form-item label="支付方式ID" prop="modeId">
        <el-input v-model="temp.modeId"></el-input>
      </el-form-item>


      <el-form-item label="原系统订单号" prop="outTradeNo">
        <el-input v-model="temp.outTradeNo"></el-input>
      </el-form-item>

      <el-form-item label="总金额" prop="totalFee">
        <el-input v-model="temp.totalFee"></el-input>
      </el-form-item>
      <el-form-item label="退款金额" prop="refundFee">
        <el-input v-model="temp.refundFee"></el-input>
      </el-form-item>

      <el-form-item label="退款理由" prop="refundReason">
        <el-input v-model="temp.refundReason"></el-input>
      </el-form-item>

      <el-form-item label="商户操作员编号" prop="uid">
        <el-input v-model="this.uid"></el-input>
      </el-form-item>

      <el-form-item label="操作员姓名" prop="name">
        <el-input v-model="this.name"></el-input>
      </el-form-item>

    </el-form>

    <div slot="footer"
         class="dialog-footer">
      <el-button type="primary"
                 style="color:gray; font-size:16px;margin-left:240px"
                 @click="handleRefund()">退款</el-button>
    </div>

  </div>
</template>


<script>
import { mapGetters } from 'vuex'
import { refund } from '@/api/ordermanager'
export default {
  name: 'unilateral',
  data() {
    const validateFee = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入退款金额'))
      } else {
        if (value !== null && value > this.temp.totalFee) {
          callback(new Error('退款金额不能大于总金额'))
        }
      }
    }
    return {
      temp: {
        orgId: undefined,
        modeId: undefined,
        outTradeNo: undefined,
        refundFee: undefined,
        totalFee: undefined,
        refundReason: undefined
      },
      rules: {
        orgId: [
          { required: true, message: '机构ID不能为空', trigger: 'blur' }
        ],
        modeId: [
          { required: true, message: '支付方式ID不能为空', trigger: 'blur' }
        ],
        outTradeNo: [
          { required: true, message: '原系统订单号不能为空', trigger: 'blur' }
        ],
        totalFee: [
          { required: true, message: '总金额不能为空', trigger: 'blur' }
        ],
        refundFee: [
          { required: true, message: '退款金额不能为空', trigger: 'blur' },
          { validator: validateFee, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'uid',
      'orgId',
      'name',
      'nick',
      'avatar',
      'roles',
      'perms'
    ])
  },
  methods: {

    handleRefund() {
      var refundParam = {
        orgId: this.temp.orgId,
        modeId: this.temp.modeId,
        outTradeNo: this.temp.outTradeNo,
        refundFee: this.temp.refundFee
      }
      this.$confirm('是否确认退款?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        refund(refundParam).then(res => {
          // console.log(res.data.data)
          this.$message({
            type: 'success',
            message: res.data.data
          })
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '退款失败!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '退款取消'
        })
      })
    }
  }
}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-input {
  width: 400px;
}
</style>
